﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <title>JS手机端日历签到特效 - 站长素材</title>
    <link rel="stylesheet" href="/css/public.css"/>
    <link rel="stylesheet" href="/css/signin.css"/>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
</head>

<body>

<div class="top flex flex-align-end flex-pack-center flex-warp">

    <div class="user col-xs-6 ">
        <div class="col-xs-12"><a href="profiles.html" style="color: white; font-size: 30px;"><</a></div>
        <div class="col-xs-12"><img id="img" width="60px" class="rounded-circle"/></div>
        <div class="col-xs-12">用户名:<span id="name"></span></div>
        <div class="col-xs-12">当前积分:<span id="con"></span></div>
        <div class="col-xs-12" style="color: white">共签到 <span id="tips"></span> 天</div>
    </div>
    <div class="out-1 flex flex-align-center flex-pack-center col-xs-6" id="signIn">
        <div class="out-2 flex flex-align-center flex-pack-center">
            <div class="signBtn">
                <strong id="sign-txt">签到</strong>
                <span>连续<em id="sign-count">0</em>天</span>
            </div>
        </div>
    </div>

</div>


<div class="Calendar">
    <div id="toyear" class="flex flex-pack-center">
        <div id="idCalendarPre">&lt;</div>
        <div class="year-month">
            <span id="idCalendarYear">2018</span>年<span id="idCalendarMonth">6</span>月
        </div>
        <div id="idCalendarNext">&gt;</div>
    </div>
    <table border="1px" cellpadding="0" cellspacing="0">
        <thead>
        <tr class="tou">
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
        </tr>
        </thead>
        <tbody id="idCalendar">
        </tbody>
    </table>
</div>
<script type="text/javascript" src="/js/rili.js"></script>
<script language="JavaScript">
    var coun;
    var isSign = false;
    var myday = new Array(); //已签到的数组
    //			myday[0] = "1528646400"
    //			myday[1] = "1528387200"
    //			myday[0] = "1542008800"
    var user = JSON.parse(sessionStorage.getItem("user"));
    setTimeout(function () {

        // 签到时间
        var cale = new Calendar("idCalendar", {
            qdDay: myday,
            onToday: function (o) {
                o.className = "onToday";
            },
            onSignIn: function () {
                $$("sign-txt").innerHTML = '已签到';
            },
            onFinish: function () {//myday.length;
                $$("idCalendarYear").innerHTML = this.Year;
                $$("idCalendarMonth").innerHTML = this.Month; //表头年份

            }
        });

        $$("idCalendarPre").onclick = function () {
            cale.PreMonth();
        }
        $$("idCalendarNext").onclick = function () {
            cale.NextMonth();
        }
        //添加今天签到
        $$("signIn").onclick = function () {
            if (isSign == false) {
                var res = cale.SignIn();
                if (res == '1') {
                    $.post("/users/" + user.id + "/signs", function (data) {
                        if (data.success) {
                            //location.href = "sign.html"
                            $(document).dialog({
                                type: "confirm",
                                style: "IOS",
                                titleShow: false,
                                content: "签到成功,当前积分加1000",
                                buttons: [{
                                    name: "知道了",
                                    callback: function () {
                                        //刷新界面
                                        location.href = "sign.html";
                                    }
                                }]
                            })
                        }
                    }, "json");
                    $$("sign-txt").innerHTML = '已签到';
                    $("#tips").html(parseInt($("#tips").html()) + 1)
                    $$("sign-count").innerHTML = parseInt($$("sign-count").innerHTML) + 1;
                    isSign = true;//显示签到
                } else if (res == '2') {
                    $$("sign-txt").innerHTML = '已签到';
                    $(document).dialog({
                        style: "IOS",
                        titleShow: false,
                        content: "今天已经签到过了,请明天再来",
                        autoClose: 1000
                    })
                }
            } else {
                $(document).dialog({
                    style: "IOS",
                    titleShow: false,
                    content: "今天已经签到过了,请明天再来",
                    autoClose: 1000
                })
            }
        }
    }, 100)

    $.get("/users/" + user.id + "/signs", function (data) {
        var list = data.list;
        console.log(list);
        if (list != "" && list != null) {
            for (var i = 0; i < list.length; i++) {
                var p = parseInt(Date.parse(new Date(list[i].lastDate)) / 1000);
                myday[i] = p;
            }
            //连续签到显示 最后签到时间为今天就显示,否则不显示
            var last = list[list.length - 1].lastDate;
            var lastdate = timestampToTime(last);
            var newDate = timestampToTime(new Date());
            if (lastdate == newDate) {
                $$("sign-count").innerHTML = parseInt(list[list.length - 1].continuousDays);
            } else {
                $$("sign-count").innerHTML = "0";
            }

            $("#tips").html(list[list.length - 1].days);//签到次数
            $("#name").html(user.nickName);
            $("#img").attr("src", user.headImgUrl);
            $("#con").html(list[list.length - 1].integral);

            if (list[list.length - 1].days >= 7) {
                /////7
                if (list[list.length - 1].signState.week != 1) {
                    $("#week").attr("onclick", "inputBtn('10000')")
                } else {
                    $("#week").html("已领取").attr("onclick", null);
                }

            }
            ///15
            if (list[list.length - 1].days >= 15) {
                if (list[list.length - 1].signState.halfMonth != 1) {
                    $("#halfMonth").attr("onclick", "inputBtn('20000')")
                } else {
                    $("#halfMonth").html("已领取").attr("onclick", null);
                }
            }

            //28
            if (list[list.length - 1].days >= 28) {
                if (list[list.length - 1].signState.month != 1) {
                    $("#month").attr("onclick", "inputBtn('50000')")
                } else {
                    $("#month").html("已领取").attr("onclick", null);
                }
            }
        }
    })

    function inputBtn(ele) {
        if (ele != null) {
            $.post("/users/" + user.id + "/userIntegrals", {"integral": ele}, function (data) {
                if (data.success) {
                    $(document).dialog({
                        style: "IOS",
                        titleShow: false,
                        content: "领取成功",
                        autoClose: 1000
                    });
                    if (ele == 10000) {
                        $("#week").html("已领取").attr("onclick", null);
                        $("#con").html(parseInt($("#con").html()) + 10000);
                    } else if (ele == 20000) {
                        $("#halfMonth").html("已领取").attr("onclick", null);
                        $("#con").html(parseInt($("#con").html()) + 20000);
                    } else if (ele == 50000) {
                        $("#month").html("已领取").attr("onclick", null);
                        $("#con").html(parseInt($("#con").html()) + 50000);
                    }
                }
            })
        } else {
            $(document).dialog({
                style: "IOS",
                titleShow: false,
                content: "签到天数不够",
                autoClose: 1000
            });

        }

    }

    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        return Y + M + D;
    }
</script>
<div style="margin-left: 30px; color: #00bbd3; ">
    <p>
        签到满7天领取10000积分
        <a href="javascript:" id="week" onclick="inputBtn(null)" data-state="week"
           class="btn btn-primary btn-xs inputBtn"
           style="font-size: 10px; float: right; margin-right: 10%">领取</a>
    </p>

    <p>
        签到满15天领取20000积分
        <a href="javascript:" id="halfMonth" onclick="inputBtn(null)" class="btn btn-primary btn-xs inputBtn"
           style=" font-size: 10px; float: right;  margin-right: 10%">领取</a>
    </p>
    <p>
        签到满28天领取50000积分
        <a href="javascript:" id="month" onclick="inputBtn(null)" class="btn btn-primary btn-xs inputBtn"
           style=" font-size: 10px; float: right; margin-right: 10%">领取</a>
    </p>

</div>
</body>
</html>